<template>
	<view>
		<!-- <view class="flex_c page content" :style="'background-image: url(' + $c.config.media + 'yuemini/reg_bg.png);'"> -->
		<!-- paddingTop:$store.state.StatusBar.statusBar + 'px' -->
		<view class="content page flex_c" :style="'background-image: url(' + $c.config.media + 'yuemini/reg_bg.png);'">
			<view :style="{height:$store.state.StatusBar.statusBar + 'px'}">
			</view>
			<!-- 		<view class="flex_r top">
				<view class="icon_ top-item" :class="{top_item:index === currentIndex}" v-for="(item,index) in tabList"
					@click="switchTabbarPage(index)">
					{{item.title}}
				</view>
			</view> -->
			<view v-if="isWXflag==true" style="height: 100rpx;"></view>
			<swiper class="flex1 page-current" :current="currentIndex" @change="change"
				:style="{display: currentIndex !== 4 ? '' : 'none'}">
				<!-- 	<swiper-item class="img">
					<view class="img" v-if="tabberPageLoadFlag[0]">
						<a-agree></a-agree>
					</view>
				</swiper-item> -->
				<!-- 电竞 -->
				<!-- 			<swiper-item class="img">
					<view class="img" v-if="tabberPageLoadFlag[1]">
						<b-esports></b-esports>
					</view>
				</swiper-item> -->
				<swiper-item class="item_yutang">
					<view class="img" v-if="tabberPageLoadFlag[0]">
						<c-pool ></c-pool>
					</view>
				</swiper-item>
				<!-- 喝茶 -->
				<!-- 			<swiper-item class="img"> 
					<view class="img" v-if="tabberPageLoadFlag[3]">
						<d-tea></d-tea>
					</view>
				</swiper-item> -->
			</swiper>
			<!-- <view class="flex1 page-current" v-if="tabberPageLoadFlag[2]" :style="{display: currentIndex === 2? '' : 'none'}" >
				<!-- <map id="myMap" style="width: 100%; height: 100%" min-scale="8" max-scale="13">
				</map> -->
			<!--</view> -->

			<!-- 这种方式性能好点 -->
			<!-- 		<view class="flex1 page-current">
			<view class="img" v-if="tabberPageLoadFlag[0]" :style="{display: currentIndex === 0 ? '' : 'none'}">
				<a-agree></a-agree>
			</view>
			<view class="img" v-if="tabberPageLoadFlag[1]" :style="{display: currentIndex === 1 ? '' : 'none'}">
				<b-esports></b-esports>
			</view>
			<view class="img" v-if="tabberPageLoadFlag[2]" :style="{display: currentIndex === 2 ? '' : 'none'}">
				<c-pool></c-pool>
			</view>
			<view class="img" v-if="tabberPageLoadFlag[3]" :style="{display: currentIndex === 3 ? '' : 'none'}">
				<d-tea></d-tea>
			</view>
			<view class="map" v-if="tabberPageLoadFlag[4]" :style="{display: currentIndex === 4 ? '' : 'none'}">
				<e-map></e-map>
			</view>
		</view> -->
		</view>
	</view>
</template>

<script>
	import {
		to
	} from '@/utils/index.js';
	import aAgree from "./page/a-agree.vue"
	import bEsports from "./page/b-esports.vue"
	import cPool from "./page/c-pool.vue"
	import dTea from "./page/d-tea.vue"
	export default {
		components: {
			aAgree,
			bEsports,
			cPool,
			dTea
		},
		onShow() {
			// #ifdef MP-WEIXIN
			 this.isWXflag =true;			
			// #endif

			this.pageheigh = uni.getSystemInfoSync().windowHeight;
			if (this.currentIndex == 1) {
				this.switchTabbarPage(0);
			}
			uni.$emit('update',{'msg':'子组件'});

		},
		data() {
			return {
				$c: this.$c,
				isWXflag:false,
				tabList: [
					// {
					// 	title: '约旅友'
					// },
					// {
					// 	title: '电竞'
					// },
					{
						title: '鱼塘'
					},
					// {
					// 	title: '约喝茶'
					// },
					{
						title: '地图'
					}
				],
				// tabbar当前被选中的序号
				currentIndex: 0,
				pageheigh: 0,
				// 自定义底栏对应页面的加载情况
				tabberPageLoadFlag: [true, false, false, false, false, false]
			}
		},
		methods: {
			change(e) {
				console.log(e.detail.current)
				if (e.detail.source === 'touch') {
					this.switchTabbarPage(e.detail.current)
				}
			},
			// 切换导航页面
			switchTabbarPage(index) {
				const selectPageFlag = this.tabberPageLoadFlag[index]
				if (selectPageFlag === undefined) {
					return
				}
				if (selectPageFlag === false) {
					this.tabberPageLoadFlag[index] = true
				}
				if (index == 1) {
					to("/pages/m-pages/m-home/map?index=" + index)
				}
				this.currentIndex = index
			}
		}
	}
</script>
<style>
	page {
		background: linear-gradient(#e3ecfb, #fdedf0, #fff, #fff);
	}
</style>
<style lang="scss" scoped>
	.page {
		position: relative;
		width: 100%;
		height: 100vh;

		::-webkit-scrollbar {
			display: none !important;
			width: 0 !important;
			height: 0 !important;
			-webkit-appearance: none;
			background: transparent;
		}

		.top {
			position: relative;
			z-index: 9999999;
			width: 100%;
			height: 100rpx;

			.top-item {
				padding: 0 30rpx;
				height: 80rpx;
				color: #a3a7b0;
				transition: all 0.3s;
			}

			.top_item {
				font-weight: bold;
				font-size: 46rpx;
				color: #fff;
			}
		}

		.page-current {
			position: relative;
			width: 100%;
			height: 0;

			.page-current-box {
				width: 100%;
				height: 100%;
				background-color: #16d808;
			}
		}
	}

	.map {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background-color: #16d808;
	}

	.unvip-wrap {
		width: 600rpx;
		background-color: #fff;
		// color: #fff;
		padding: 50rpx 0rpx;
		border-radius: 10rpx;
		box-sizing: border-box;
		text-align: center;

		.unvip-content {
			padding: 0rpx 80rpx;
		}

		.unvip-btn {
			width: 500rpx;
			height: 80rpx;
			text-align: center;
			margin: 0 auto;
			line-height: 80rpx;

			color: #a14617;

			background: linear-gradient(127deg, #fff4de 0%, #ffe6ba 100%, #ffe6ba 100%);
			border-radius: 40rpx;
			font-size: 28rpx;
			margin-top: 80rpx;
		}
	}

	.content {
		width: 750rpx;
		min-height: 100vh;
		//background-repeat: no-repeat;
		background-size: 750rpx 100vh;
		background-position: 0 0;

		.warp {
			width: 702rpx;
			margin: 0 auto;

			.nav-bar {
				display: flex;
				font-weight: 550;
				font-size: 34rpx;
				color: #fff;

				.title {
					width: 680rpx;
					text-align: center;
				}
			}

			.avater-line {
				display: flex;
				flex-wrap: wrap;

				justify-content: space-between;

				.list-anvther-filter {
					filter: blur(4px);
				}

				.avater {
					width: 150rpx;
					height: 150rpx;
					// margin-top: 10rpx;

					.avater-img {
						margin: 0 auto;
						width: 120rpx;
						height: 120rpx;
						display: block;
						border-radius: 50%;
					}
				}
			}

			.desc-line {
				width: 702rpx;
				height: 250rpx;
				border-radius: 20rpx;
				background: linear-gradient(136deg, #f9db6e 0%, #fff3e2 100%);
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx;
				box-sizing: border-box;

				.desc-text {
					color: #a44b1d;
				}

				.heart {
					width: 320rpx;
					height: 250rpx;

					image {
						width: 396rpx;
						height: 320rpx;
						display: block;
						transform: scale(0.5);
					}

					// display: block;
				}
			}

			.btn-line {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.home-jiesuo {
					width: 694rpx;
					height: 100rpx;

					background-size: 100% 100%;
					text-align: center;
					line-height: 100rpx;
					color: #fff;
					font-size: 32rpx;
					z-index: 10;
					color: #a14617;
					border-radius: 100rpx;

					background: linear-gradient(127deg, #fff4de 30%, #ffe6ba 100%, #ffe6ba 100%);
				}

				.btn {
					width: 180rpx;
					height: 78rpx;
					line-height: 78rpx;
					text-align: center;
					border-radius: 20rpx;
					color: #fff3e2;
					background: rgba(255, 255, 255, 0.2);
				}
			}
		}
	}
</style>